import React, { Component } from 'react';
import { StyleSheet, View,ImageBackground,Image,
    Dimensions,Text,TouchableWithoutFeedback } from 'react-native';
import {txt,view} from '../comm/Size';
import AppStyle from '../styles/index';
const { width, height } = Dimensions.get("window");
import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux';


class LoginPage extends Component {
    static navigationOptions = {
        header: null
    }

    constructor(props) {
        super();
        this.state = {};
    }

    login = ()=> {
        this.props.navigation.navigate('LoginModule')
    }

    noneAuth=()=>{
        this.props.navigation.navigate('HomePage')
    }

    reg = ()=> {
        this.props.navigation.navigate('RegPage')
    }

    render() {
        return (
            <ImageBackground style={{height:height,width:width}}
                             source={{uri:"http://7xrn9i.com1.z0.glb.clouddn.com/youme/background/login_bg.jpg"}}>
                <View style={styles.loginPage}>
                    <View style={styles.logoArea}>
                        <Image style={styles.logo} source={require('../assets/iconlogo.png')}></Image>
                    </View>
                    <View style={styles.formArea}>
                        <TouchableWithoutFeedback onPress={this.login}>
                            <View style={styles.ghostBtn}>
                                <Text style={{color:AppStyle.mainColor}}>手机号登录</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={this.reg}>
                            <View style={styles.ghostBtn}>
                                <Text style={{color:AppStyle.mainColor}}>注册</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPress={this.noneAuth}>
                            <View style={{marginTop:20}}>
                                <Text style={styles.linkBtn}>游客试用</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                    <View style={styles.otherArea}>
                        <Text style={styles.descrInfo}>其他登录方式</Text>
                        <Text style={styles.descrInfo}>-------------------------------------------------</Text>
                        <Icon style={styles.loginBtnIcon} color="#928E8F" name="wechat" size={30}></Icon>
                    </View>
                </View>
            </ImageBackground>
        )
    }
}

const styles = StyleSheet.create({
    loginPage: {
        flex: 1
    },
    logoArea: {
        height: view(482),
        justifyContent: "center",
        alignItems: "center",
        paddingTop: view(80)
    },
    logo: {
        width: view(164),
        height: view(164)
    },
    formArea: {
        flex: 1,
        paddingHorizontal: view(100)
    },
    otherArea: {
        alignItems: "center",
        height: view(300)
    },
    ghostBtn: {
        height: view(80),
        borderColor: AppStyle.mainColor,
        borderWidth: 1,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: view(80),
        marginVertical: view(20)
    },
    linkBtn: {
        textDecorationLine: "underline",
        alignSelf: "center",
        color: "#928E8F"
    },
    descrInfo: {
        alignSelf: "center",
        color: "#928E8F"
    },

    loginInfo: {
        height: view(50),
        width: view(570)
    },
    loginBtnIcon: {
        marginTop: 20
    }

})

export default connect(state=>({taskList: state.TaskReducer.taskList}))(LoginPage);